<template>
  <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
    <template #header>
      <div style="display: flex; align-items: center">
        <title-view :title="title" />
        <div style="display: flex; align-items: center; color: #86909c">
          <div style="margin: 0 5px; color: #e1e6ed">|</div>
          <div>{{ address }}</div>
        </div>
      </div>
    </template>
    <div>
      <div class="del-title"><span>*</span>删除原因</div>
      <el-input
        v-model="reason"
        :autosize="{ minRows: 4, maxRows: 4 }"
        :maxlength="200"
        show-word-limit
        type="textarea"
        placeholder="请输入"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" color="#F2F3F5">取消</el-button>
        <el-button type="primary" @click="handleDel">删除</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { deleteContract } from "@/apis/contracting";

const title = ref("");
const reason = ref();
const contracteesId = ref();
const address = ref();
const dialogVisible = ref(false);
const emit = defineEmits(["handelSearch"]);
const openModal = row => {
  reason.value = "";
  title.value = row.customerName;
  address.value = row.address;
  contracteesId.value = row.contracteesId;
  dialogVisible.value = true;
};
const handleClose = () => {
  reason.value = "";
  dialogVisible.value = false;
};
const handleDel = async () => {
  if (!reason.value) {
    ElMessage.error("请输入删除原因");
  } else {
    await deleteContract({ contracteesId: contracteesId.value, reason: reason.value });
    dialogVisible.value = false;
    ElMessage.success("删除成功");
    emit("handelSearch");
  }
};
defineExpose({ openModal });
</script>

<style scoped lang="scss">
.title-container {
  font-size: 14px !important;
}

.dialog-footer {
  text-align: center;

  .el-button {
    height: 36px;
    width: 120px;
  }
}

.del-title {
  margin-bottom: 10px;

  span {
    color: #f53f3f;
    margin-right: 5px;
  }
}

:deep(.el-textarea__inner) {
  background: #f2f3f5 !important;
  box-shadow: none !important;
}

:deep(.el-input__count) {
  background: #f2f3f5 !important;
}
</style>
